<template>
  <!-- 设置表头 -->
  <div class="table-head-set">
    <el-dialog title="设置表头" :visible.sync="centerDialogVisible" width="690px" center>
      <div class="list-box">
        <template v-if="setCols&&setCols.length">
          <div class="table">
            <div class="header flex">
              <span>表头名称</span>
              <span>是否展示</span>
              <span>宽度</span>
              <span>拖动排序</span>
            </div>
            <!-- handle=".drag_target" -->
            <draggable class="body_box " v-model="setCols" :group="{ name: 'lists', pull: 'move', put: true }" animation="150">
              <div v-for="(o,i) in setCols" :key="i" class="row_item flex ">
                <span class="col1">{{ o.label }}</span>
                <span class="col2">
                  <el-switch v-model="o.isShow" active-color="#13ce66" inactive-color="#ff4949">
                  </el-switch>
                </span>
                <span>
                  <el-input v-model="o.width" placeholder="字段宽度"></el-input>
                </span>
                <span class="col3">
                  <i class=" drag_target el-icon-rank"></i>
                </span>
              </div>
            </draggable>
          </div>

        </template>
        <div v-else style="width: 100%; line-height: 100px;font-size: 20px;color: #999;text-align: center;">
          暂无数据
        </div>

        <div class="btn_box">
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tableHeadersMap from "../../utils/tableHeaders";
import {
  addUserListHeader,
  editUserListHeader,
  getUserListHeaderByType,
} from "../../api/tableHeader";
//导入draggable组件
import draggable from "vuedraggable";
export default {
  name: "",
  components: { draggable },
  data() {
    return {
      centerDialogVisible: false,
      type: 1, //表头类型
      allCols: [], //所有的表头
      setCols: [], //当前设置的表头
      checkList: [], //选中的项目
      form: {
        id: "",
        type: "",
        settingsJson: "",
      },
    };
  },
  created() {},
  methods: {
    open(type) {
      this.type = type;
      this.centerDialogVisible = true;
      this.form.id = "";
      this.allCols = JSON.parse(
        JSON.stringify(tableHeadersMap[this.type] || [])
      );
      // 请求后台设置详情
      this.getHeaderSettingJSON();
    },
    getHeaderSettingJSON() {
      getUserListHeaderByType({ type: this.type }).then((res) => {
        if (res.data) {
          this.form.id = res.data.id;
          this.setCols = JSON.parse(res.data.settingsJson);
        }
        this.setDefaultSelect();
      });
    },
    // 计算表头的默认值
    setDefaultSelect() {
      if (
        this.setCols &&
        this.setCols.length &&
        this.allCols &&
        this.allCols.length
      ) {
        const setColsKey = this.setCols.map((r) => r.key);
        const newArr = [];
        this.setCols.forEach((r) => {
          this.allCols.forEach((r2) => {
            if (r.key == r2.key) {
              r2.isShow = r.isShow;
              r2.width = r.width;
              newArr.push({ ...r2 });
            }
          });
        });
        this.allCols.forEach((r2) => {
          if (!setColsKey.includes(r2.key)) {
            // 在已设置的数组中没找到  加入 r
            newArr.push({ ...r2 });
          }
        });
        this.setCols = JSON.parse(JSON.stringify(newArr));
      } else {
        this.setCols = JSON.parse(JSON.stringify(this.allCols));
      }
    },

    save() {
      // // 找出开启的项
      // const arr = [];
      // if (this.allCols && this.allCols.length) {
      //   this.allCols.forEach((r) => {
      //     if (r.isShow) {
      //       arr.push({ ...r });
      //     }
      //   });
      // }
      // arr;
      // console.log("%c Line:88 🍭 arr", "color:#b03734", arr);
      // 保存开启的项到后台
      this.form.settingsJson = JSON.stringify(this.setCols);
      this.form.type = this.type;
      if (this.form.id) {
        // 编辑
        editUserListHeader(this.form).then((res) => {
          this.$message.success(res.msg);
          this.close();
        });
      } else {
        // 新增
        addUserListHeader(this.form).then((res) => {
          console.log("%c Line:111 🍇 res", "color:#7f2b82", res);
          this.$message.success(res.msg);
          this.close();
        });
      }
    },
    close() {
      this.$emit("save", this.form.settingsJson);
      this.centerDialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
$--color-border: #e7e7e7;
.list-box {
  // position: relative;
  padding-bottom: 50px;
  .table {
    border: 1px solid $--color-border;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
    overflow: hidden;
  }
  .header {
    background-color: #fff;
    height: 44px;
    line-height: 44px;

    font-weight: bold;
    > span {
      width: 220px;
      border-right: 1px solid $--color-border;
      border-bottom: 1px solid $--color-border;
      &:nth-of-type(3) {
          padding: 0 10px;
        }
      &:nth-of-type(4) {
        border-right: none;
      }
    }
  }
  .body_box {
    .row_item {
      height: 44px;
      line-height: 44px;
      > span {
        width: 220px;
        border-right: 1px solid $--color-border;
        // border-bottom: 1px solid $--color-border;
        &:nth-of-type(3) {
          padding: 0 10px;
        }
        &:nth-of-type(4) {
          border-right: none;
        }
      }
      &:nth-of-type(2n) {
        background-color: #f5f4fc;
      }
      &:hover {
        background-color: #f5f7fa;
      }

      .drag_target {
        font-size: 24px;
        cursor: pointer;
      }
      // &:last-child{
      //   >span{
      //     border-bottom: none;
      //   }

      // }
    }
  }
}
.btn_box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  height: 50px;
  background-color: #fff;
  padding-top: 10px;
}
</style>
